import React, { Component } from 'react'
import {connect} from "react-redux" //connect可以获取仓库里的数据和修改仓库里数据
 class Router02 extends Component {
  setName(){
    this.props.setname()
  }
  render() {
    console.log(this.props,3456);
    return (
      <div className='router02'> 
         <span>姓名：{this.props.name}</span>
         <span>{this.props.age}</span>
         <span>{this.props.sex}</span>
         <button onClick={this.setName.bind(this)}>点击我修改名字</button>
         <button onClick={()=>this.props.setsex("男")}>改变性别</button>
      </div>
    )
  }
}
let mapStateToprops =(state)=>{ // 这个函数得名字很语义化，便利所有的数据提供给props，
  // 这个函数得参数state就是仓库里的state
  console.log(state,111111)
  return {
    ...state
  }
}
let mapDispatchToprops = (dispatch)=>{
  return {
      setname(){
        dispatch({
          type:"setname", // 必须叫type属性，因为在action里有一个type和他相对应
          payload:"lisi"
        })
      },
      setsex(data){
        dispatch({
          type:"setsex",
          payload:data

        })
      }
  }
}
export default connect(mapStateToprops,mapDispatchToprops)(Router02)